<template>
  <div class="item-one">
    
    <div class="Box">
        <!-- 商戶基本信息 -->
      <div class="one" >
        <div class="title">
          <span>商戶基本信息</span><span v-if="merchantinfo.status == 9" class="err">驳回原因：{{merchantinfo.reviewedReason}}</span>
          <div>
            <el-button icon="el-icon-refresh"></el-button>
          </div>
        </div>
        <div class="basicBox">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item v-if="userinfo.rolesId !=2 && userinfo.rolesId !=3 && userinfo.rolesId !=4" label="一级服务商:" prop="agent1Id">
                    <el-autocomplete
                        class="service"
                        v-model="ruleForm.agent1"
                        :fetch-suggestions="querySearch"
                        placeholder="请选择一级服务商"
                        @select="serviceid"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item v-if="userinfo.rolesId !=3 && userinfo.rolesId !=4" label="二级服务商:" prop="agent2Id">
                    <el-autocomplete
                        class="service"
                        v-model="ruleForm.agent2"
                        :fetch-suggestions="querySearch2"
                        placeholder="请选择二级服务商"
                        @select="serviceid2"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item v-if="userinfo.rolesId !=4" label="业务经理" prop="bdId">
                    <el-autocomplete
                        class="service"
                        v-model="ruleForm.BDname"
                        :fetch-suggestions="BDname"
                        placeholder="业务经理"
                        @select="BDid"
                    ></el-autocomplete>
                </el-form-item>
             
                <el-form-item label="商户联系人" prop="contactName"><el-input placeholder="商户联系人" v-model.trim="ruleForm.contactName"></el-input></el-form-item>
                <el-form-item label="负责人电话" prop="contactPhone"><el-input placeholder="负责人电话" v-model.trim="ruleForm.contactPhone"></el-input></el-form-item>
                <el-form-item label="负责人邮箱" prop="contactEmail"><el-input placeholder="负责人邮箱" v-model.trim="ruleForm.contactEmail"></el-input></el-form-item>
                <el-form-item label="所属行业" prop="industry1">
                    <el-select class="service" v-model="ruleForm.merchantMcc1" placeholder="所属行业" @change="wx2fun">
                        <el-option
                        v-for="(value, index) in wx1arr"
                        :key="index"
                        :label="value.mcc1Name"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item prop="industry2">
                    <el-select class="width100" v-model="ruleForm.merchantMcc2" placeholder="细分行业" @change="wx3fun">
                        <el-option
                        v-for="(value, index) in wx2arr"
                        :key="index"
                        :value="value.id"
                        :label="value.mcc2Name"
                        ></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item prop="industry3">
                     <el-select class="width100" v-model="ruleForm.merchantMcc3" placeholder="三级行业" @change="wx4fun">
                        <el-option
                        v-for="(value, index) in wx3arr"
                        :key="index"
                        :value="value.id"
                        :label="value.mcc3Name"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客服电话(必须手机号)" prop="servicePhone"><el-input placeholder="客服电话" v-model="ruleForm.servicePhone"></el-input></el-form-item>
                <el-form-item label="所在省" prop="province">
                    <el-select class="width100" v-model="ruleForm.province" placeholder="所在省" @change="city">
                        <el-option
                        v-for="(item, index) in provincearr"
                        :key="index"
                        :label="item.provinceName"
                        :value="item.id"
                        :codeid="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="city">
                    <el-select class="width100" v-model="ruleForm.city" placeholder="所在市" @change='county'>
                        <el-option
                        v-for="(value, index) in cityarr"
                        :key="index"
                        :label="value.cityName"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区" prop="county">
                    <el-select class="width100" v-model="ruleForm.county" placeholder="所在区" @change='countyCode'>
                        <el-option
                        v-for="(value, index) in countyarr"
                        :key="index"
                        :label="value.countyName"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商户详细地址" prop="merchantAddress"><el-input placeholder="商户详细地址" v-model.trim="ruleForm.merchantAddress"></el-input></el-form-item>
            </el-form>
        </div>
      </div>


        <!-- 商戶结算信息 -->
      <div class="two" >
        <div class="title">
          <span>商戶结算信息</span>
          <div>
            
          </div>
        </div>
         <div class="basicBox">
            <el-form :model="settlement" status-icon :rules="settlements" ref="settlement" label-width="160px" class="demo-ruleForm">
                <el-form-item label="入网商户类型" prop="merchant_type">
                    <el-select class="width100"  v-model="settlement.merchantType" placeholder="入网商户类型" disabled @change='merchantsType'>
                        <el-option keys="3" label="企业" :value="1"></el-option>
                        <el-option keys="3" label="个体工商户" :value="2"></el-option>
                        <el-option keys="4" label="小微/个人" :value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 企业 -->
            <el-form v-show="settlement.merchantType == 1 || settlement.merchantType == 2" :model="settlement" status-icon :rules="settlements" ref="settlement" label-width="160px" class="demo-ruleForm">
           
           
                <el-form-item label="营业执照" prop="businessLicence">
                     <div class="principalPhotoStyle">
                          <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="businessLicense"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pLicense"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pLicense"
                        :src="picture.pLicense"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>营业执照</div>
                </el-form-item>
                        </div>
                </el-form-item>      
                <el-form-item label="商户名称" prop="merchantName"><el-input placeholder="商户名称" v-model.trim="ruleForm.merchantName"></el-input></el-form-item>
                <el-form-item label="商户简称" prop="merchantShortName"><el-input placeholder="商户简称" v-model.trim="ruleForm.merchantShortName"></el-input></el-form-item>
                <el-form-item label="注册名称" prop="merchantBusinessName"><el-input placeholder="注册名称" v-model.trim="ruleForm.merchantBusinessName"></el-input></el-form-item>
                <el-form-item label="营业执照号" prop="businessLicence"><el-input placeholder="营业执照号" v-model.trim="settlement.businessLicence" autocomplete="off"></el-input></el-form-item>
                <el-form-item label="执照起始日" prop="businessLicenceStt">
                    <div class="block">
                        <el-date-picker
                          v-model="settlement.businessLicenceStt"
                          type="date"
                          value-format="yyyyMMdd"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="执照到期日" prop="businessLicenceExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement.businessLicenceExpire"
                        type="date"
                         value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>                
              <el-form-item label="结算类型" prop="accountType">
              <el-select
                class="width100"
                @change="SettlerStatus"
                v-model="settlement.accountType"
                placeholder="结算账户类型"
              >
                <el-option
                  keys="3"
                  label="对公结算"
                  :value="1"
                  v-show="this.settlement.merchantType != 2"
                ></el-option>
                <el-option keys="4" label="法人对私结算" :value="2"></el-option>
                <el-option
                  keys="5"
                  label="非法人对私结算"
                  :value="3"
                ></el-option>
              </el-select>
            </el-form-item>
                <el-form-item label="入网证件类型" prop="licenceType">
                    <el-select class="width100" disabled v-model="settlement.licenceType" placeholder="结算账户类型" @change='licenceType'>
                        <el-option keys="3" label="三合一营业执照" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="settlement.accountType == 1 ||settlement.accountType == 2 ||settlement.accountType == 3" label="法人身份证">
                    <div class="principalPhotoStyle">
                          <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="PersonIDcardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardA"
                        :src="picture.pIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证人像面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="PersonIDcardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pIdcardB"
                        :src="picture.pIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证国徽面</div>
                </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item v-if=" settlement.accountType == 1 ||settlement.accountType == 2 ||settlement.accountType == 3" label="法人名称" prop="legalName">
                    <el-input placeholder="法人名称" v-model.trim="settlement.legalName"></el-input>
                    </el-form-item>
                <el-form-item v-if=" settlement.accountType == 1 ||settlement.accountType == 2 ||settlement.accountType == 3" label="法人身份证号" prop="legalCertNo">
                    <el-input placeholder="法人身份证号" v-model.trim="settlement.legalCertNo"></el-input>
                    </el-form-item>
                <el-form-item v-if=" settlement.accountType == 1 ||settlement.accountType == 2 ||settlement.accountType == 3" label="法人身份证起始日" prop="legalCertStt">
                    <div class="block">
                        <el-date-picker
                          v-model="settlement.legalCertStt"
                          type="date"
                          value-format="yyyyMMdd"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item v-if=" settlement.accountType == 1 ||settlement.accountType == 2 ||settlement.accountType == 3" label="法人身份证到期日" prop="legaCertExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement.legaCertExpire"
                        type="date"
                         value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>    

                <el-form-item label="结算人身份证" v-if="SettlerStatusValue" prop="principalCertName">
                    <div class="principalPhotoStyle">
           <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="PersonIDcardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardA"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardA"
                        :src="picture.pBankIdcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证人像照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="PersonIDcardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardB"
                        :src="picture.pBankIdcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>身份证国徽照</div>
                </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="结算人姓名" v-if="SettlerStatusValue" prop="principalCertName"><el-input placeholder="结算人姓名" v-model.trim="settlement.accountCardName"></el-input></el-form-item>
                <el-form-item label="结算人证件号码" v-if="SettlerStatusValue" prop="principalCertNo"><el-input placeholder="结算人证件号码" v-model.trim="settlement.principalCertNo"></el-input></el-form-item>
                <el-form-item label="结算人身份证起始日" v-if="SettlerStatusValue" prop="principalCertStt">
                    <div class="block">
                        <el-date-picker
                          v-model="settlement.principalCertStt"
                          type="date"
                          value-format="yyyyMMdd"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="结算人身份证到期日" v-if="SettlerStatusValue" prop="principalCertExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement.principalCertExpire"
                        type="date"
                        value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item
              label="开户许可证或印鉴卡"
              v-if="settlement.accountType == 1">
              <div class="principalPhotoStyle">
                <div class="idCard1Style">
                  <el-upload
                    list-type="picture-card"
                    :action="upload"
                    :headers="token"
                    :show-file-list="false"
                    :on-success="pOpenAccount"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      v-if="picture.pOpenAccount"
                      :src="picture.pOpenAccount"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div>开户许可证或印鉴卡</div>
                </div>
              </div>
            </el-form-item>
                <el-form-item label="结算银行卡" 
              v-if="settlement.accountType == 2 || settlement.accountType == 3"
                >
                    <div class="principalPhotoStyle">
                          <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="BankCardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardA"
                    >   
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardA"
                        :src="picture.pBankcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="BankCardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardB"
                        :src="picture.pBankcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡反面</div>
                </el-form-item>
                    </div>
                </el-form-item>


                <el-form-item label="结算账户开户名" prop="accountCardName"><el-input placeholder="结算账户开户名" v-model.trim="settlement.accountCardName"></el-input></el-form-item>
                <el-form-item label="结算账户开户号" prop="accountCardNum"><el-input placeholder="结算账户开户号" v-model.trim="settlement.accountCardNum"></el-input></el-form-item>
                <el-form-item label="银行预留手机号" prop="accountPhone"><el-input placeholder="银行预留手机号" v-model.trim="settlement.accountPhone"></el-input></el-form-item>
                <el-form-item label="开户行" prop="parentBankNo">
                     <el-select class="width100" v-model="settlement.parentBankNo" placeholder="开户行" @change="parent">
                        <el-option
                        v-for="(item, index) in parentlists"
                        :key="index"
                        :label="item.parentName"
                        :value="item.parentCode"
                        :codeid="item.parentBankNo"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算户支行地址" prop="province">
                    <el-select class="width100" v-model="settlement.provinces" placeholder="所在省" @change="citys">
                        <el-option
                        v-for="(item, index) in provincearr"
                        :key="index"
                        :label="item.provinceName"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="city">
                    <el-select class="width100" v-model="settlement.acccity" placeholder="所在市" @change='countys'>
                        <el-option
                        v-for="(value, index) in citysarr"
                        :key="index"
                        :label="value.cityName"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                  <el-form-item label="结算户开户支行" prop="accountBankName">
                     <el-autocomplete
                        class="service"
                        v-model="settlement.accountBankName"
                        :fetch-suggestions="querySearch3"
                        placeholder="结算户开户支行"
                        @select="serviceid3"
                    ></el-autocomplete>
                </el-form-item>
                
            </el-form>



            <!-- 小微商户 -->
            <el-form v-show="settlement.merchantType == 3" :model="settlement1" status-icon :rules="settlements1" ref="settlement1" label-width="160px" class="demo-ruleForm">            
            <el-form-item label="结算类型" prop="accountType">
              <el-select
                class="width100"
                v-model="settlement1.accountType"
                placeholder="结算账户类型"
                disabled
              >
                <el-option keys="4" label="对私结算" :value="4"></el-option>
              </el-select>
            </el-form-item>
                <el-form-item label="商户名称" prop="merchantName"><el-input placeholder="商户名称" v-model.trim="ruleForm.merchantName"></el-input></el-form-item>
                <el-form-item label="商户简称" prop="merchantShortName"><el-input placeholder="商户简称" v-model.trim="ruleForm.merchantShortName"></el-input></el-form-item>
                <el-form-item label="注册名称" prop="merchantBusinessName"><el-input placeholder="注册名称" v-model.trim="ruleForm.merchantBusinessName"></el-input></el-form-item>
                
                <el-form-item label="结算人身份证" prop="principalCertName">
                    <div class="principalPhotoStyle">
                      <el-form-item class="photo">
                        <el-upload
                        list-type="picture-card"
                        :action="PersonIDcardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardA">
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardA"
                        :src="picture.pBankIdcardA"
                        class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证人像面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="PersonIDcardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankIdcardB">
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankIdcardB"
                        :src="picture.pBankIdcardB"
                        class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>对私结算人身份证国徽面</div>
                </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="结算人姓名" prop="principalCertName"><el-input placeholder="结算人姓名" v-model.trim="settlement1.accountCardName"></el-input></el-form-item>
                <el-form-item label="结算人证件号码" prop="principalCertNo"><el-input placeholder="结算人证件号码" v-model.trim="settlement1.principalCertNo"></el-input></el-form-item>
                <el-form-item label="结算人身份证起始日" prop="principalCertStt">
                    <div class="block">
                        <el-date-picker
                          v-model="settlement1.principalCertStt"
                          type="date"
                          value-format="yyyyMMdd"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="结算人身份证到期日" prop="principalCertExpire">
                    <div class="block">
                        <el-date-picker
                        v-model="settlement1.principalCertExpire"
                        type="date"
                        value-format="yyyyMMdd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>

                <el-form-item label="结算银行卡" prop="accountCardName">
                    <dir class="principalPhotoStyle">
                         <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="BankCardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardA"
                    >   
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardA"
                        :src="picture.pBankcardA"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡正面</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="BankCardPhoto"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pBankcardB"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pBankcardB"
                        :src="picture.pBankcardB"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>银行卡反面</div>
                </el-form-item>
                    </dir>
                </el-form-item>

                <el-form-item label="结算账户开户名" prop="accountCardName"><el-input placeholder="结算账户开户名" v-model.trim="settlement1.accountCardName"></el-input></el-form-item>
                <el-form-item label="结算账户开户号" prop="accountCardNum"><el-input placeholder="结算账户开户号" v-model.trim="settlement1.accountCardNum"></el-input></el-form-item>
                <el-form-item label="银行预留手机号" prop="accountPhone"><el-input placeholder="银行预留手机号" v-model.trim="settlement1.accountPhone"></el-input></el-form-item>
                <el-form-item label="开户行" prop="parentBankNo">
                     <el-select class="width100" v-model="settlement1.parentBankNo" placeholder="开户行" @change="parent">
                        <el-option
                        v-for="(item, index) in parentlists"
                        :key="index"
                        :label="item.parentName"
                        :value="item.parentCode"
                        :codeid="item.parentBankNo"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算户支行地址" prop="province">
                    <el-select class="width100" v-model="settlement1.provinces" placeholder="所在省" @change="citys">
                        <el-option
                        v-for="(item, index) in provincearr"
                        :key="index"
                        :label="item.provinceName"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市" prop="city">
                    <el-select class="width100" v-model="settlement1.acccity" placeholder="所在市" @change='countys'>
                        <el-option
                        v-for="(value, index) in citysarr"
                        :key="index"
                        :label="value.cityName"
                        :value="value.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                  <el-form-item label="结算户开户支行" prop="accountBankName">
                     <el-autocomplete
                        class="service"
                        v-model="settlement1.accountBankName"
                        :fetch-suggestions="querySearch3"
                        placeholder="结算户开户支行"
                        @select="serviceid3"
                    ></el-autocomplete>
                </el-form-item>
            </el-form>
        </div>
      </div>



    <!-- 商戶费率及证照 -->
      <div class="three">
        <div class="title">
            <span>商戶费率及证照</span>
        </div>
        <div class="basicBoxs">
            <!-- 手续费 -->
            <el-form :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic" v-if="merchantinfo.status != 0" >
                <el-form-item label="商户手续费" prop="rateCode">
                    <el-select class="width100"  v-model="picture.rateCode" placeholder="商户手续费">
                        <el-option v-for="(item,index) in ratelists" :key="index" keys="3" :label="item.rate/10+ '‰'" :value="item.rateCode"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 小微商户 -->
            <el-form :model="picture" status-icon ref="pictures" label-width="110px" class="demo-dynamic">
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOutside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOutside"
                        :src="picture.pOutside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>外部门头照</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pCashier"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pCashier"
                        :src="picture.pCashier"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>收银台照片</div>
                </el-form-item>
                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pInside"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pInside"
                        :src="picture.pInside"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>内部环境照</div>
                </el-form-item>
                      <el-form-item class="photo" v-show="settlement.accountType == 3">
              <el-upload
                list-type="picture-card"
                :action="upload"
                :headers="token"
                :show-file-list="false"
                :on-success="pUnincorporated"
              >
                <img
                  style="width: 100%; height: 100%"
                  v-if="picture.pUnincorporated"
                  :src="picture.pUnincorporated"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div>入账非法人证明</div>
            </el-form-item>
                      <el-form-item class="photo" v-show="settlement.merchantType == 3">
              <el-upload
                list-type="picture-card"
                :action="upload"
                :headers="token"
                :show-file-list="false"
                :on-success="pIdcardHander"
              >
                <img
                  style="width: 100%; height: 100%"
                  v-if="picture.pIdcardHander"
                  :src="picture.pIdcardHander"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div>手持身份证照片</div>
            </el-form-item>


                <el-form-item class="photo">
                    <el-upload
                        list-type="picture-card"
                        :action="upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="pOther"
                    >
                        <img
                        style="width:100%;height:100%"
                        v-if="picture.pOther"
                        :src="picture.pOther"
                        class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div>其他照片</div>
                </el-form-item>
            </el-form>
        <div class="btnBox">
            <el-button type="primary" @click="addmerchant()">提交</el-button>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import {
  getservice,
  getBD,
  wx1,
  wx2,
  wx3,
  province,
  city,
  county,
  parentlist,
  banklist,
  ratelist,
  merchantsave,
  uploadfileget,
  updateToReview,
  merchantupdate,
  mcclist,
  arealist,
} from "@/api/api";
import { customBaseUrl } from "@/utils/index";

import bus from "../common/bus";
export default {
  //   name: "baseform",
  data: function () {
    return {
      SettlerStatusValue: false,
      token: { token: sessionStorage.getItem("token") },
      tags: [],
      ones: true,
      twos: false,
      threes: false,
      loading: "",
      merchantinfo: "",
      uploadfile: "",
      businessLicense: customBaseUrl("/product/mini/upload/0"), //营业执照
      PersonIDcardPhoto: customBaseUrl("/product/mini/upload/1"), //法人身份证
      BankCardPhoto: customBaseUrl("/product/mini/upload/2"), //银行卡照片
      upload:
        process.env.VUE_APP_BASE_URL +
        "/product/v31/api/merchant/uploadfile/upload",
      ratelists: [],
      servicearr1: [],
      servicearr2: [],
      BDarr: [],
      wx1arr: [],
      wx1code: "",
      wx2arr: [],
      wx3arr: [],
      provincearr: [],
      cityarr: [],
      citysarr: [],
      countyarr: [],
      bankarr: [],
      userinfo: {},
      parentlists: [],
      ruleForm: {
        agent1Id: "", // 一级服务商
        agent2Id: "", //二级服务商
        bdId: "", // DB
        merchant_name: "", //商户名称
        instNo: "60000001",
        merchantShortName: "",
        merchantName: "",
      },
      settlement: {
        licenceType: "",
        photoType: "1",
      },
      settlement1: {
        photoType: "1",
      },
      picture: {
        pCashier: "",
        pBankcardA: "",
        pBankcardB: "",
        pIdcardA: "",
        pIdcardB: "",
        pOutside: "",
        pInside: "",
        pIdcardHander: "",
        pBankIdcardA: "",
        pBankIdcardB: "",
        pOther: "",
        pLicense: "",
        pOpenAccount: "",
        pUnincorporated: "",
        otherPlatform: "",
        aliMaterials: "",
      },

      rules: {
        agent1Id: [{ required: true, message: "请选择一级服务商" }],
        agent2Id: [{ required: true, message: "请选择二级服务商" }],
        bdId: [{ required: true, message: "请选择业务经理" }],
        merchantName: [
          { required: true, message: "请输入商户名称", trigger: "blur" },
        ],
        merchantShortName: [
          { required: true, message: "请输入商户简称", trigger: "blur" },
        ],
        merchantBusinessName: [
          { required: true, message: "请输入注册名称", trigger: "blur" },
        ],
        contactName: [
          { required: true, message: "请输入商户联系人", trigger: "blur" },
        ],
        contactPhone: [
          {
            pattern: /^1[34578]\d{9}$/,
            required: true,
            message: "请输入正确电话",
            trigger: "blur",
          },
        ],
        contactEmail: [
          {
            type: "email",
            required: true,
            message: "请输入正确邮箱",
            trigger: "blur",
          },
        ],
        industry1: [
          { required: true, message: "请选择所属行业", trigger: "blur" },
        ],
        industry2: [
          { required: true, message: "请选择二级所属行业", trigger: "blur" },
        ],
        industry3: [
          { required: true, message: "请选择三级所属行业", trigger: "blur" },
        ],
        servicePhone: [
          {
            pattern: /^1[34578]\d{9}$/,
            required: true,
            message: "请输入正确电话",
            trigger: "blur",
          },
        ],
        province: [{ required: true, message: "请选择省", trigger: "blur" }],
        city: [{ required: true, message: "请选择市", trigger: "blur" }],
        county: [{ required: true, message: "请选择区", trigger: "blur" }],
        merchantAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      // 企业
      settlements: {
        merchant_type: [
          { required: true, message: "请选择商户类型", trigger: "blur" },
        ],
        businessLicence: [
          { required: true, message: "营业执照号", trigger: "blur" },
        ],
        businessLicenceStt: [
          { required: true, message: "营业执照起始日", trigger: "blur" },
        ],
        businessLicenceExpire: [
          { required: true, message: "营业执照到期日", trigger: "blur" },
        ],
        accountType: [
          { required: true, message: "结算账户类型", trigger: "blur" },
        ],
        principalCertNo: [
          { required: true, message: "请输入结算人证件号码", trigger: "blur" },
        ],
        principalCertStt: [
          {
            required: true,
            message: "请输入结算人证件起始日",
            trigger: "blur",
          },
        ],
        principalCertExpire: [
          {
            required: true,
            message: "请输入结算人证件到期日",
            trigger: "blur",
          },
        ],
        accountCardName: [
          { required: true, message: "请输入结算账户开户名", trigger: "blur" },
        ],
        accountCardNum: [
          { required: true, message: "请输入结算账户开户号", trigger: "blur" },
        ],
        accountPhone: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" },
        ],
        sheng: [{ required: true, message: "请选择开户行", trigger: "blur" }],
        province: [
          { required: true, message: "请选择所在省", trigger: "blur" },
        ],
        city: [{ required: true, message: "请选择所在市", trigger: "blur" }],
        accountBankName: [{ required: true, message: "请选择结算户开户支行" }],
      },
      // 小微企业
      settlements1: {
        principalCertNo: [
          { required: true, message: "请输入结算人证件号码", trigger: "blur" },
        ],
        principalCertStt: [
          {
            required: true,
            message: "请输入结算人证件起始日",
            trigger: "blur",
          },
        ],
        principalCertExpire: [
          {
            required: true,
            message: "请输入结算人证件到期日",
            trigger: "blur",
          },
        ],
        accountCardName: [
          { required: true, message: "请输入结算账户开户名", trigger: "blur" },
        ],
        accountCardNum: [
          { required: true, message: "请输入结算账户开户号", trigger: "blur" },
        ],
        accountPhone: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" },
        ],
        sheng: [{ required: true, message: "请选择开户行", trigger: "blur" }],
        province: [
          { required: true, message: "请选择所在省", trigger: "blur" },
        ],
        city: [{ required: true, message: "请选择所在市", trigger: "blur" }],
        accountBankName: [{ required: true, message: "请选择结算户开户支行" }],
      },
      pictures: {},
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.merchantinfo = JSON.parse(sessionStorage.getItem("auditinfo"));
    this.tags = JSON.parse(sessionStorage.getItem("tags"));
    this.getservice();
    this.wx1();
    this.province();
    this.parentlist();
    this.uploadfileget();
    if (this.userinfo.rolesId == 2) {
      this.serviceid(this.userinfo.fid);
    } else if (this.userinfo.rolesId == 3) {
      this.ruleForm.agent2Id = this.userinfo.fid;
      this.getBD(this.userinfo.fid);
    } else if (this.userinfo.rolesId == 4) {
      this.ruleForm.bdId = this.userinfo.fid;
    }
    // 获取费率
    ratelist({
      bdId: this.merchantinfo.bdId,
    }).then((res) => {
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else {
        this.ratelists = res.data;
      }
    });
    // 获取行业
    this.wx2fun(this.merchantinfo.merchantMcc1);
    this.wx3fun(this.merchantinfo.merchantMcc2);
    // 回显信息
    // 商户基本信息
    this.ruleForm = {
      agent1: this.merchantinfo.agent1Name,
      agent1Id: this.merchantinfo.agent1Id,
      agent2: this.merchantinfo.agent2Name,
      agent2Id: this.merchantinfo.agent2Id,
      BDname: this.merchantinfo.bdName,
      bdId: this.merchantinfo.bdId,
      merchantName: this.merchantinfo.merchantName,
      merchantShortName: this.merchantinfo.merchantShortName,
      merchantBusinessName: this.merchantinfo.merchantBusinessName,
      contactName: this.merchantinfo.contactName,
      contactPhone: this.merchantinfo.contactPhone,
      contactEmail: this.merchantinfo.contactEmail,
      merchantMcc1Name: this.merchantinfo.merchantMcc1Name,
      merchantMcc1: this.merchantinfo.merchantMcc1,
      merchantMcc2Name: this.merchantinfo.merchantMcc2Name,
      merchantMcc2: this.merchantinfo.merchantMcc2,
      merchantMccName: this.merchantinfo.merchantMccName,
      merchantMccCode: this.merchantinfo.merchantMccCode,
      merchantMcc3: this.merchantinfo.merchantMcc3,
      servicePhone: this.merchantinfo.servicePhone,
      province: this.merchantinfo.merchantProvince,
      provinceCode: this.merchantinfo.provinceCode,
      merchantProvince: this.merchantinfo.merchantProvince,
      provinceCode: this.merchantinfo.provinceCode,
      city: this.merchantinfo.merchantCity,
      merchantCity: this.merchantinfo.merchantCity,
      cityCode: this.merchantinfo.cityCode,
      county: this.merchantinfo.merchantCounty,
      merchantCounty: this.merchantinfo.merchantCounty,
      countyCode: this.merchantinfo.countyCode,
      merchantAddress: this.merchantinfo.merchantAddress,
      mccId: this.merchantinfo.mccId,
      areaId: this.merchantinfo.areaId,
      instNo: "60000001",
      channelId: sessionStorage.getItem("channel"),
    };
    // 商户结算信息
    this.settlement = {
      merchantType: this.merchantinfo.merchantType,
      businessLicence: this.merchantinfo.businessLicence,
      businessLicenceStt: this.merchantinfo.businessLicenceStt,
      businessLicenceExpire: this.merchantinfo.businessLicenceExpire,
      accountType: this.merchantinfo.accountType,
      settlementType: this.merchantinfo.settlementType,
      legalName: this.merchantinfo.legalName,
      legalCertNo: this.merchantinfo.legalCertNo,
      legalCertStt: this.merchantinfo.legalCertStt,
      legaCertExpire: this.merchantinfo.legaCertExpire,
      principalCertNo: this.merchantinfo.principalCertNo,
      principalCertStt: this.merchantinfo.principalCertStt,
      principalCertExpire: this.merchantinfo.principalCertExpire,
      accountCardName: this.merchantinfo.accountCardName,
      accountCardNum: this.merchantinfo.accountCardNum,
      accountPhone: this.merchantinfo.accountPhone,
      parentBankNo: this.merchantinfo.parentBankNo,
      provinces: Number(this.merchantinfo.accountBankProvince),
      accountBankProvince: Number(this.merchantinfo.accountBankProvince),
      acccity: Number(this.merchantinfo.accountBankCity),
      accountBankCity: this.merchantinfo.accountBankCity,
      accountBankName: this.merchantinfo.accountBankName,
      accountBankNo: this.merchantinfo.accountBankNo,
      shengNo: this.merchantinfo.accountBankNo.substring(0, 3),
      licenceType: this.merchantinfo.licenceType,
      photoType: this.merchantinfo.licenceType,
      bankId: this.merchantinfo.bankId,
    };
    banklist({
      area_id: this.merchantinfo.accountBankCity,
      parent_code: this.settlement.parentBankNo,
    }).then((res) => {
      // console.log(res);
      // this.bankarr = res.data;
      this.bankarr = [];
      for (var i = 0; i < res.data.length; i++) {
        this.bankarr.push({
          value: res.data[i].bankName,
          id: res.data[i].id,
        });
      }
    });
    // 小微
    this.settlement1 = {
      merchantType: this.merchantinfo.merchantType,
      businessLicence: this.merchantinfo.businessLicence,
      businessLicenceStt: this.merchantinfo.businessLicenceStt,
      businessLicenceExpire: this.merchantinfo.businessLicenceExpire,
      accountType: this.merchantinfo.accountType,
      settlementType: this.merchantinfo.settlementType,
      legalName: this.merchantinfo.legalName,
      legalCertNo: this.merchantinfo.legalCertNo,
      principalCertName: this.merchantinfo.principalCertName,
      principalCertNo: this.merchantinfo.principalCertNo,
      principalCertStt: this.merchantinfo.principalCertStt,
      principalCertExpire: this.merchantinfo.principalCertExpire,
      accountCardName: this.merchantinfo.accountCardName,
      accountCardNum: this.merchantinfo.accountCardNum,
      accountPhone: this.merchantinfo.accountPhone,
      parentBankNo: this.merchantinfo.parentBankNo,
      provinces: Number(this.merchantinfo.accountBankProvince),
      accountBankProvince: this.merchantinfo.accountBankProvince,
      acccity: Number(this.merchantinfo.accountBankCity),
      accountBankCity: this.merchantinfo.accountBankCity,
      accountBankName: this.merchantinfo.accountBankName,
      accountBankNo: this.merchantinfo.accountBankNo,
      shengNo: this.merchantinfo.accountBankNo.substring(0, 3),
      bankId: this.merchantinfo.bankId,
    };
    // 商戶费率及证照
    this.picture = {
      rateCode: this.merchantinfo.rateCode,
    };
    if (this.settlement.merchantType == 2) {
      this.settlement.licenceType = 1;
    }
    if (this.settlement1.accountType == 4) {
      this.picture.pIdcardA = "";
      this.picture.pIdcardB = "";
      this.settlement1.legalName = "";
      this.settlement1.legalCertNo = "";
      this.settlement1.legalCertStt = "";
      this.settlement1.legaCertExpire = "";
    }
    if (this.merchantinfo.accountType == 3) {
      this.SettlerStatusValue = true;
      this.picture.pOpenAccount = "";
    } else if (this.merchantinfo.accountType == 2) {
      this.SettlerStatusValue = false;
      this.picture.pOpenAccount = "";
      this.picture.pBankIdcardA = "";
      this.settlement.principalCertNo = "";
      this.picture.pBankIdcardB = "";
      this.settlement.principalCertStt = "";
      this.settlement.principalCertExpire = "";
    } else if (this.merchantinfo.accountType == 1) {
      this.SettlerStatusValue = false;
      this.picture.pBankIdcardA = "";
      this.settlement.principalCertNo = "";
      this.picture.pBankIdcardB = "";
      this.settlement.principalCertStt = "";
      this.settlement.principalCertExpire = "";
    }
  },
  methods: {
    SettlerStatus(val) {
      if (val == 3) {
        this.SettlerStatusValue = true;
        this.picture.pOpenAccount = "";
      } else if (val == 2) {
        this.SettlerStatusValue = false;
        this.picture.pOpenAccount = "";
        this.picture.pBankIdcardA = "";
        this.settlement.principalCertNo = "";
        this.picture.pBankIdcardB = "";
        this.settlement.principalCertStt = "";
        this.settlement.principalCertExpire = "";
        this.picture.pUnincorporated = "";
      } else {
        this.SettlerStatusValue = false;
        this.picture.pBankIdcardA = "";
        this.settlement.principalCertNo = "";
        this.picture.pBankIdcardB = "";
        this.settlement.principalCertStt = "";
        this.settlement.principalCertExpire = "";
        this.picture.pUnincorporated = "";
      }
    },
    //   获取照片
    uploadfileget() {
      uploadfileget({}, this.merchantinfo.uploadId).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          // console.log("res.data", res.data, this.merchantinfo.accountType);
          this.uploadfile = res.data;
          if (this.merchantinfo.accountType == 4) {
            this.picture = {
              pBankcardA: res.data.pBankcardA,
              pBankcardB: res.data.pBankcardB,
              pIdcardA: "",
              pIdcardB: "",
              pOutside: res.data.pOutside,
              pCashier: res.data.pCashier,
              pInside: res.data.pInside,
              pIdcardHander: res.data.pIdcardHander,
              pBankIdcardA: res.data.pBankIdcardA,
              pBankIdcardB: res.data.pBankIdcardB,
              pOther: res.data.pOther,
              pLicense: res.data.pLicense,
              pOpenAccount: res.data.pOpenAccount,
              pOrganization: res.data.pOrganization,
              pTaxRegistration: res.data.pTaxRegistration,
              pUnincorporated: res.data.pUnincorporated,
              aliMaterials: res.data.aliMaterials,
              otherPlatform: res.data.otherPlatform,
              rateCode: this.merchantinfo.rateCode,
            };
          } else {
            this.picture = {
              pBankcardA: res.data.pBankcardA,
              pBankcardB: res.data.pBankcardB,
              pIdcardA: res.data.pIdcardA,
              pIdcardB: res.data.pIdcardB,
              pOutside: res.data.pOutside,
              pCashier: res.data.pCashier,
              pInside: res.data.pInside,
              pIdcardHander: res.data.pIdcardHander,
              pBankIdcardA: res.data.pBankIdcardA,
              pBankIdcardB: res.data.pBankIdcardB,
              pOther: res.data.pOther,
              pLicense: res.data.pLicense,
              pOpenAccount: res.data.pOpenAccount,
              pOrganization: res.data.pOrganization,
              pTaxRegistration: res.data.pTaxRegistration,
              pUnincorporated: res.data.pUnincorporated,
              aliMaterials: res.data.aliMaterials,
              otherPlatform: res.data.otherPlatform,
              rateCode: this.merchantinfo.rateCode,
            };
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 商户类型
    merchantsType(val) {
      this.SettlerStatus();
      if (val == 3) {
        this.settlement.licenceType = "";
        this.settlement1.merchantType = 3;
        this.settlement1.accountType = 4;
      } else if (val == 1) {
        //   this.settlement.accountType = ''
        //   this.settlement.licenceType = 0
      } else if (val == 2) {
        this.settlement.licenceType = 1;
        //   this.settlement.accountType = ''
      }
    },
    // 获取一级服务商
    getservice() {
      getservice({
        type: 1,
      }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr1.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 一级服务商
    querySearch(queryString, cb) {
      let servicearr = this.servicearr1;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 二级服务商
    querySearch2(queryString, cb) {
      let servicearr = this.servicearr2;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 银行支行
    querySearch3(queryString, cb) {
      let servicearr = this.bankarr;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 根据一级查2级
    serviceid(item) {
      this.ruleForm.agent1Id = item.id;
      this.servicearr2 = [];
      getservice({
        type: 2,
        parentid: item.id,
      }).then((res) => {
        // console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr2.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 获取2级
    serviceid2(item) {
      this.ruleForm.agent2Id = item.id;
      this.getBD(item.id);
    },
    // 区银行支行信息
    serviceid3(item) {
      // console.log(item);
      this.settlement.accountBankNo = item.id;
      this.settlement1.accountBankNo = item.id;
      this.settlement.bankId = item.id;
      this.settlement1.bankId = item.id;
    },
    // 业务经理
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 获取BD
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    BDid(item) {
      this.ruleForm.bdId = item.id;
      // 获取费率
      ratelist({
        bdId: item.id,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.ratelists = res.data;
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 获取一级银行
    parentlist() {
      parentlist().then((res) => {
        this.parentlists = res.data;
      });
    },
    parent(val) {
      let obj = {};
      obj = this.parentlists.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.parentCode === val; //筛选出匹配数据
      });
      // console.log(obj);
      this.settlement.accountBankName = "";
      this.settlement1.accountBankName = "";
      this.settlement.provinces = "";
      this.settlement1.provinces = "";
      this.settlement.acccity = "";
      this.settlement1.acccity = "";
      banklist({
        parent_code: obj.parentCode,
        area_id: this.cityId,
      }).then((res) => {
        this.bankarr = [];
        for (var i = 0; i < res.data.length; i++) {
          this.bankarr.push({
            value: res.data[i].bankName,
            id: res.data[i].id,
          });
        }
      });
    },
    // 获取行业
    wx1(val) {
      mcclist({
        level: 1,
      }).then((res) => {
        this.wx1arr = res.data;
      });
    },
    // 获取行业二级
    wx2fun(val) {
      this.ruleForm.merchantMcc1 = val;
      this.wx2arr = "";
      mcclist({
        level: 2,
        parent_id: val,
      }).then((res) => {
        this.wx2arr = res.data;
      });
    },
    // 获取行业三级
    wx3fun(val) {
      this.ruleForm.merchantMcc2 = val;
      this.wx3arr = "";
      mcclist({
        level: 3,
        parent_id: val,
      }).then((res) => {
        this.wx3arr = res.data;
      });
    },
    // 选取行业三级
    wx4fun(val) {
      let obj = {};
      obj = this.wx3arr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      this.ruleForm.merchantMcc3 = obj.id;
      this.ruleForm.merchantMccName = obj.thirdname;
      this.ruleForm.mccId = obj.id;
    },
    //自动获取省市区
    province() {
      arealist({
        level: 1,
      }).then((res) => {
        var that = this;
        this.provincearr = res.data;
        if (this.merchantinfo.accountBankProvince) {
          arealist({
            level: 2,
            parent_id: this.merchantinfo.accountBankProvince,
          }).then((res) => {
            this.citysarr = res.data;
            if (this.merchantinfo.accountBankCity) {
              var quid = res.data.filter(function (item) {
                return item.id == that.merchantinfo.accountBankCity;
              });
              this.cityId = quid[0].id;
            }
          });
        }
        if (this.merchantinfo.provinceCode) {
          arealist({
            level: 2,
            parent_id: this.merchantinfo.provinceCode,
          }).then((res) => {
            this.cityarr = res.data;
            if (this.merchantinfo.cityCode) {
              arealist({
                level: 3,
                parent_id: this.merchantinfo.cityCode,
              }).then((res) => {
                this.countyarr = res.data;
                if (this.merchantinfo.countyCode) {
                  var qucode = res.data.filter(function (item) {
                    return item.code == that.merchantinfo.countyCode;
                  });
                }
              });
            }
          });
        }
      });
    },
    //获取市
    city(val) {
      // console.log(val);
      let obj = {};
      obj = this.provincearr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id == val; //筛选出匹配数据
      });
      // console.log(obj);
      this.ruleForm.merchantProvince = obj.name;
      this.ruleForm.provinceCode = obj.code;
      this.cityarr = "";
      this.ruleForm.city = "";
      this.ruleForm.cityCode = "";
      this.ruleForm.county = "";
      this.ruleForm.countyCode = "";
      arealist({
        level: 2,
        parent_id: obj.id,
      }).then((res) => {
        this.cityarr = res.data;
      });
    },
    //获取银行市code
    citys(val) {
      let obj = {};
      obj = this.provincearr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      this.settlement.accountBankProvince = obj.id;
      this.settlement1.accountBankProvince = obj.id;
      this.citysarr = "";
      this.settlement.acccity = "";
      this.settlement1.acccity = "";
      this.settlement.accountBankName = "";
      this.settlement1.accountBankName = "";
      arealist({
        level: 2,
        parent_id: obj.id,
      }).then((res) => {
        this.citysarr = res.data;
      });
    },
    // 获取银行区code
    countys(val) {
      let obj = {};
      obj = this.citysarr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      // console.log(obj);
      this.settlement.accountBankCity = obj.code;
      this.settlement1.accountBankCity = obj.code;
      this.settlement.bankId = obj.id;
      this.countysarr = "";
      this.settlement.accountBankName = "";
      this.settlement1.accountBankName = "";
      this.cityId = obj.id;
      if (this.settlement.merchantType == 3) {
        banklist({
          area_id: obj.id,
          parent_code: this.settlement1.parentBankNo,
        }).then((res) => {
          this.bankarr = [];
          for (var i = 0; i < res.data.length; i++) {
            this.bankarr.push({
              value: res.data[i].bankName,
              id: res.data[i].id,
            });
          }
        });
      } else {
        banklist({
          area_id: obj.id,
          parent_code: this.settlement.parentBankNo,
        }).then((res) => {
          this.bankarr = [];
          for (var i = 0; i < res.data.length; i++) {
            this.bankarr.push({
              value: res.data[i].bankName,
              id: res.data[i].id,
            });
          }
        });
      }
    },
    // 选择开户支行
    accountBank(val) {
      let obj = {};
      obj = this.bankarr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.unionBankNo === val; //筛选出匹配数据
      });
      this.settlement.accountBankName = obj.bankName;
      this.settlement.accountBankNo = obj.unionBankNo;
    },
    // 获取区
    county(val) {
      let obj = {};
      obj = this.cityarr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      this.ruleForm.merchantCity = obj.name;
      this.countyarr = "";
      arealist({
        level: 3,
        parent_id: obj.id,
      }).then((res) => {
        this.countyarr = res.data;
      });
    },
    countyCode(val) {
      let obj = {};
      obj = this.countyarr.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      this.ruleForm.merchantCounty = obj.name;
      this.ruleForm.areaId = obj.id;
    },
    // 上传图片
    pBankcardA(res, file) {
      //银行卡正面
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pBankcardA = res.data.filePath;
        this.settlement.accountCardNum = res.data.cardNumber;
        this.settlement1.accountCardNum = res.data.cardNumber;
      } else {
        this.$message.error(res.message);
      }
    },
    pBankcardB(res, file) {
      //银行卡反面
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pBankcardB = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pIdcardA(res, file) {
      //身份证正面
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pIdcardA = res.data.filePath;
        this.settlement.legalCertNo = res.data.idNumber;
      } else {
        this.$message.error(res.message);
      }
    },
    pIdcardB(res, file) {
      //身份证正面
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pIdcardB = res.data.filePath;
        this.settlement.legalCertStt = res.data.validPeriodStat
          ? res.data.validPeriodStat.replace(/\-/g, "")
          : null;
        this.settlement.legaCertExpire = res.data.validPeriodEnd
          ? res.data.validPeriodStat.replace(/\-/g, "")
          : null;
      } else {
        this.$message.error(res.message);
      }
    },
    pOutside(res, file) {
      // 外部门头照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pOutside = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pCashier(res, file) {
      // 收银台照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pCashier = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pInside(res, file) {
      // 内部环境照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pInside = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pIdcardHander(res, file) {
      // 手持身份证照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pIdcardHander = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pBankIdcardA(res, file) {
      // 对私结算人身份证正面照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.settlement.principalCertNo = res.data.idNumber;
        this.settlement1.principalCertNo = res.data.idNumber;
        this.picture.pBankIdcardA = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pBankIdcardB(res, file) {
      // 对私结算人身份证反面照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pBankIdcardB = res.data.filePath;
        this.settlement.principalCertStt = res.data.validPeriodStat.replace(
          /\-/g,
          ""
        );
        this.settlement.principalCertExpire = res.data.validPeriodEnd.replace(
          /\-/g,
          ""
        );
        this.settlement1.principalCertStt = res.data.validPeriodStat.replace(
          /\-/g,
          ""
        );
        this.settlement1.principalCertExpire = res.data.validPeriodEnd.replace(
          /\-/g,
          ""
        );
      } else {
        this.$message.error(res.message);
      }
    },
    pOther(res, file) {
      // 其他照片
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pOther = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pLicense(res, file) {
      // 营业执照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pLicense = res.data.filePath;
        this.ruleForm.merchantName = res.data.companyName;
        this.ruleForm.merchantShortName = res.data.companyName;
        this.ruleForm.merchantBusinessName = res.data.companyName;
        this.settlement.businessLicence = res.data.creditCode;
        this.settlement.businessLicenceExpire = res.data.validToDate
          ? res.data.validToDate.replace(/\-/g, "")
          : null;
      } else {
        this.$message.error(res.message);
      }
    },
    pOpenAccount(res, file) {
      // 开户许可证照片
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pOpenAccount = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pUnincorporated(res, file) {
      // 入账非法人证明
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pUnincorporated = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pOrganization(res, file) {
      // 组织机构代码
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pOrganization = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    pTaxRegistration(res, file) {
      // 税务登记照
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.picture.pTaxRegistration = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    otherPlatform(res, file) {
      // 第三方平台截图（绿洲）
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.$set(this.picture, "otherPlatform", res.data.filePath);
      } else {
        this.$message.error(res.message);
      }
    },
    aliMaterials(res, file) {
      // 支付宝支付物料照片
      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.$set(this.picture, "aliMaterials", res.data.filePath);
      } else {
        this.$message.error(res.message);
      }
    },
    licenceType(val) {
      this.settlement.photoType = val;
    },

    // 修改商户
    updateToReview(merchaninfo) {
      // console.log("merchaninfo===", merchaninfo);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var that = this;
      // console.log(merchaninfo);
      updateToReview(merchaninfo, this.merchantinfo.id).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          loading.close();
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          loading.close();
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.ruleForm = {
            agent1Id: "", // 一级服务商
            agent2Id: "", //二级服务商
            bdId: "", // DB
            merchant_name: "", //商户名称
            instNo: "60000001",
            merchantShortName: "",
            merchantName: "",
          };
          (this.settlement = {
            licenceType: "",
            photoType: "1",
          }),
            (this.picture = {
              pBankcardA: "",
              pBankcardB: "",
              pIdcardA: "",
              pIdcardB: "",
              pOutside: "",
              pCashier: "",
              pInside: "",
              pIdcardHander: "",
              pBankIdcardA: "",
              pBankIdcardB: "",
              pOther: "",
              pLicense: "",
              pOpenAccount: "",
              pUnincorporated: "",
            }),
            (this.settlement1 = {});
          this.$router.push({
            path: "/mymerchants",
          });
          // setTimeout(function () {
          //   that.$router.go(0);
          // }, 300);
        } else {
          this.$message.error(res.message);
          loading.close();
        }
      });
    },
    // 修改商户(渠道)
    merchantupdate(merchaninfo) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var that = this;
      merchantupdate(merchaninfo, this.merchantinfo.id).then((res) => {
        if (res.code == 405) {
          loading.close();
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          loading.close();
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.ruleForm = {
            agent1Id: "", // 一级服务商
            agent2Id: "", //二级服务商
            bdId: "", // DB
            merchant_name: "", //商户名称
            instNo: "60000001",
            merchantName: "",
            merchantShortName: "",
          };
          (this.settlement = {
            licenceType: "",
            photoType: "1",
          }),
            (this.picture = {
              pBankcardA: "",
              pBankcardB: "",
              pIdcardA: "",
              pIdcardB: "",
              pOutside: "",
              pCashier: "",
              pInside: "",
              pIdcardHander: "",
              pBankIdcardA: "",
              pBankIdcardB: "",
              pOther: "",
              pLicense: "",
              pOpenAccount: "",
              pUnincorporated: "",
            }),
            (this.settlement1 = {});
          this.$router.push({
            path: "/mymerchants",
          });
          // setTimeout(function () {
          //   that.$router.go(0);
          // }, 300);
        } else {
          loading.close();
          this.$message.error(res.message);
        }
      });
    },
    // 修改商户
    addmerchant() {
      let channel = sessionStorage.getItem("channel");
      console.log("channel=========", channel);
      let allinfo;
      if (
        this.settlement.merchantType == 1 ||
        this.settlement.merchantType == 2
      ) {
        allinfo = Object.assign(this.ruleForm, this.settlement, this.picture); //企业
      } else if (this.settlement.merchantType == 3) {
        allinfo = Object.assign(this.ruleForm, this.settlement1, this.picture); //小微
      }
      if (channel) {
        console.log("111111111111");
        this.merchantupdate(allinfo);
      } else {
        console.log("22222222222");
        this.updateToReview(allinfo);
      }
    },
    // 关闭当前页签
    closetab() {
      let that = this;
      let _this = this;
      for (var i = 0; i < this.tags.length; i++) {
        if (this.tags[i].title == "修改商户") {
          this.tags.splice(i, 1)[0];
          bus.$emit("tags", _this.tags);
          this.$router.push("/mymerchants");
        }
      }
    },
  },
};
</script>


<style scoped lang="less">
.principalPhotoStyle {
  display: flex;
}
.err {
  color: red;
  font-size: 20px;
  width: 70%;
}
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.Box {
  width: 100%;
  background: #fff;
  padding: 10px;
}
.basicBox {
  width: 70%;
  text-align: center;
  margin: 0 auto;
}
.basicBoxs {
  width: 75%;
  text-align: center;
  margin: 0 auto;
}
.width100 {
  width: 100%;
}
.block {
  text-align: left;
}

.photo {
  width: 25%;
  display: inline-block;
}
.btnBox {
  width: 100%;
  text-align: center;
}
.service {
  width: 100%;
}
</style>
